<template>
  <div>
    <div class="event-head">
      <el-row class="event-head-content" :gutter="20">
        <el-col :span="12">
          <p style="font-size: 60px">发现校园里的精彩活动</p>
          <p>参与丰富多彩的校园活动，拓展视野，结交朋友，丰富你的大学生活。</p>
          <div>
            <el-button type="primary" @click="goEventList(0)">浏览全部活动</el-button>
            <el-button @click="goPublishEvent">发布活动</el-button>
          </div>
          <div style="padding: 20px">
            <el-avatar class="join-user" :src="item.avatar" v-for="item in joinerPage.list"></el-avatar>
            {{joinersCount}}+ 学生已参与
          </div>
        </el-col>
        <el-col :span="8">
          <el-carousel
              trigger="click"
              height="300px"
          >
            <el-carousel-item v-for="(item, idx) in eventPage.list" :key="idx">
                <el-image :src="item.cover"  style="height: 100%;border-radius: 10px"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </div>
    <div class="b-size">
      <el-space :size="30">
        <el-card class="item" shadow="hover">
          <span class="title">120+</span>
          <span style="text-align: center">本月活动</span>
        </el-card>
        <el-card class="item" shadow="hover">
          <span class="title">35+</span>
          <span style="text-align: center">活动类别</span>
        </el-card>
        <el-card class="item" shadow="hover">
          <span class="title">85%</span>
          <span style="text-align: center">学生参与率</span>
        </el-card>
        <el-card class="item" shadow="hover">
          <span class="title">4.8</span>
          <span style="text-align: center">平均满意度</span>
        </el-card>
      </el-space>
    </div>
    <div class="event-category">
      <div class="cate-box">
        <el-tag>活动分类</el-tag>
        <div>
          <p style="font-size:60px">探索感兴趣的活动类型</p>
          <span>从学术讲座到文艺表演，从体育赛事到志愿服务，总有适合你的活动</span>
        </div>
        <div class="cate-list">
          <el-space>
            <el-card class="box" v-for="item in eventCategoryList" style="padding: 0 30px" shadow="hover" @click="goEventList(item.id)">
              <el-space direction="vertical">
                <el-button circle :type="getColor()" size="large">
                  <el-icon >
                    <component :is="item.icon"></component>
                  </el-icon>
                </el-button>
                <p>
                  <el-link>{{ item.name }}</el-link>
                </p>
              </el-space>
            </el-card>
          </el-space>
        </div>
      </div>
    </div>
    <div class="advice">
      <div class="size-1400 advice-title">
        <el-tag>热门推荐</el-tag>
        <p style="font-size:60px">同学们都在关注</p>
        <p>这些活动最受欢迎，快来加入大家吧</p>
        <el-space size="large" wrap>
          <event-card @click="goEventDetail(item.eventId)" v-for="(item, index) in eventPage.list" :key="index" :eventInfo="item"></event-card>
        </el-space>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {
  reqGetEventPage,
  reqEventPersonInfo,
  reqGetEventCategoryList,
  reqGetJoinerCount,
  reqGetJoinerPage
} from "@/api/social/event";
import type {SocEvents} from "@/api/social/event/type";
import {dateDefaultFormat} from '@/utils'
import {useUserStore} from "@/stores/user";
import {Picture, Clock, Avatar, Male} from '@element-plus/icons-vue'
import EventCard from "@/components/card/EventCard.vue";

const router = useRouter()
const userStore = useUserStore()


// 数据
let eventQuery = reactive({
  pageNum: 1,
  pageSize: 8,  // 优化每页显示数量
  scope: '-1',
  keyword: ''
})
let joinersCount = ref(0)
let eventCategoryList = ref([])
let eventPage = reactive({
  total: 0,
  pageNum: 1,
  list: [] as SocEvents[]
})
let joinerPage = reactive({
  total: 0,
  pageNum: 1,
  list: []
})

// 工具函数：截断长文本
const truncate = (value: string, length: number) => {
  if (!value) return ''
  if (value.length <= length) return value
  return value.slice(0, length) + '...'
}
let getJoinersCount = async () => {
  let res = await reqGetJoinerCount()
  joinersCount.value = res.data
}
let goEventList=(categoryId: number)=>{
  router.push({
    name: 'event-list',
    query: {categoryId}
  })
}
let getJoiner=async ()=>{
 let res=await reqGetJoinerPage({pageNum: 1, pageSize: 3})
  Object.assign(joinerPage, res.data)
}
// 方法
let getEventPage = () => {
  eventPage.list = []
  reqGetEventPage(eventQuery).then(res => {
    Object.assign(eventPage, res.data)
  })
}
let tagColor =['primary','success','warning','danger']
let  getColor=()=>{
  const randomIndex = Math.floor(Math.random() * tagColor.length)
  return tagColor[randomIndex]
}
let goEventDetail = (eventId: string) => {
  router.push({
    name: 'event-detail',
    query: {eventId}
  })
}
let getEventCategory = () => {
  reqGetEventCategoryList().then(res => {
    eventCategoryList.value = res.data
  })
}
let goPublishEvent = () => {
  if (!userStore.isLogin) {
    userStore.showLoginDialog()
    return
  }
  router.push({
    name: 'event-create'
  })
}

// 初始化
onMounted(() => {
  getEventPage()
  getEventCategory()
  getJoinersCount()
  getJoiner()
})
</script>

<style scoped>
.event-head {
  height: 500px;
  background-color: #e8eefb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.join-user{
  margin-left: -10px;
}
.event-head-content {
  width: 1400px;
}

.item {
  padding: 20px 50px;
}

.title {
  font-size: 40px;
  color: #098CC0;
  display: block;
  text-align: center;
}

.event-category {
  height: 500px;
  background-color: whitesmoke;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cate-list {
  margin: 0 auto;
  padding: 50px 0;
}

.cate-box {
  width: 1400px;
  text-align: center;
}

.advice-title {
  text-align: center;
}

.advice {
  display: flex;
  align-items: center;
}

.b-size {
  width: 1400px;
  display: flex;
  justify-content: center;
  padding: 20px;
  margin: 0 auto;
}

/* 响应式适配 */
@media (max-width: 992px) {
  .event-cover-container {
    height: 140px;
  }
}

@media (max-width: 768px) {
  .event-title {
    font-size: 15px;
  }

  .event-desc {
    font-size: 12px;
  }
}

@media (max-width: 576px) {
  .event-cover-container {
    height: 120px;
  }
}
</style>
